<template>
    <admin-view>
        <admin-section>
            <admin-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="home()">明星详情</el-breadcrumb-item>
                    <el-breadcrumb-item>{{club.name}}</el-breadcrumb-item>
                </el-breadcrumb>
            </admin-card>
        </admin-section>
        <admin-section>
            <admin-card>
                <el-row>
                    <el-col :span="14">
                        <div class="table">
                            <h4>基本信息</h4>
                            <div class="editable">
                                <el-form
                                        label-position="right"
                                        label-width="94px"
                                        size="medium"
                                        :model="club"
                                        :rules="rules"
                                        ref="editor"
                                >
                                    <el-form-item label="ID" v-if="status != 'new'">
                                        <div>{{club.club_id}}</div>
                                    </el-form-item>
                                    <el-form-item
                                            label="关联管理员"
                                            prop="uid">
                                        <admin-search-edit
                                                :name="club.user_name"
                                                :avatar="club.user_avatar"
                                                :id="club.uid"
                                                :type="1"
                                                @change="onUserSelect"
                                        ></admin-search-edit>
                                    </el-form-item>
                                    <el-form-item
                                            label="站子名称"
                                            prop="name">
                                        <el-input
                                                v-model="club.name"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="关联明星"
                                            prop="star_id">
                                        <admin-search-edit
                                                :name="club.star_name"
                                                :id="club.star_id"
                                                :avatar="club.star_avatar"
                                                :type="2"
                                                :editable="false"
                                                @change="onStarSelect"></admin-search-edit>
                                    </el-form-item>
                                    <el-form-item
                                            label="联系电话"
                                            prop="phone">
                                        <el-input
                                                v-model="club.phone"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="微博地址"
                                            prop="weibo">
                                        <el-input
                                                v-model="club.weibo"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                        label="状态"
                                        prop="enable"
                                    >
                                        <el-switch v-model="club.enable"></el-switch>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button @click="onSubmit" type="primary" :loading="loading">保存</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>

                    </el-col>
                    <el-col :span="10">
                        <div class="card">
                            <h4>身份信息</h4>
                            <el-form
                                    label-position="top"
                                    size="medium"
                            >
                                <el-form-item
                                        label="身份证名称"
                                >
                                    {{club.idcard_name}}
                                </el-form-item>
                                <el-form-item
                                    label="身份证正面"
                                >
                                    <div class="card-img">
                                        <img v-img :src="club.idcard_front" />
                                    </div>

                                </el-form-item>
                                <el-form-item
                                    label="身份证反面"
                                >
                                    <div class="card-img">
                                        <img v-img :src="club.idcard_back" />
                                    </div>

                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>



            </admin-card>
        </admin-section>
    </admin-view>
</template>

<script lang="ts">

    import {Vue, Component,Watch} from 'vue-property-decorator'
    import {AdminView, AdminCard, AdminLabel, AdminSection} from '@/views/layout'
    import Stars from '@/api/stars'
    import User from '@/api/user'
    import Meta from '@/api/meta'
    import AdminDateRange from '@/views/controls/AdminDateRange'
    import AdminFileUpload from '@/views/controls/AdminFileUpload'
    import AdminDevice from '@/views/controls/AdminDevice'
    import AdminSearchEdit from '@/views/controls/AdminSearchEdit'
    import moment from 'moment'

    @Component({
        name: 'AdminClubEditor',
        components: {
            AdminView,
            AdminCard,
            AdminLabel,
            AdminSection,
            AdminDateRange,
            AdminFileUpload,
            AdminDevice,
            AdminSearchEdit
        }
    })
    export default class AdminClubEditor extends Vue {

        loading:boolean = false;

        club: Stars.GetClubResponse = {
            club_id:"",
            star_id:"",
            star_name:"",
            star_avatar:"",
            uid:"",
            user_name:"",
            user_avatar:"",
            name:"",
            phone:"",
            idcard_front:"",
            idcard_back:"",
            idcard_name:"",
            enable:false,
            idcard_front_addr:"",
            idcard_back_addr:"",
            weibo:"",
        };

        rules:Object = {};


        onSubmit() {
            let editor:any = this.$refs['editor'];

            editor.validate((valid:boolean) => {

                if(valid) {
                    if(this.status === "new" || this.status === "sync") {


                        let c: Stars.GetClubResponse = this.club;

                        let ask:Stars.CreateClubRequest = {
                            club_id: c.club_id,
                            star_id:c.star_id,
                            name:c.name,
                            phone:c.phone,
                            idcard_back:c.idcard_back_addr,
                            idcard_front:c.idcard_front_addr,
                            idcard_name:c.idcard_name,
                            enable:c.enable,
                            uid:c.uid,
                            weibo:c.weibo,
                        };

                        if(this.status === "new") {
                            ask.club_id = "";
                        }

                        this.loading = true;
                        Stars.CreateClub(ask)
                            .then((ack) => {
                                this.$message({
                                    type:"success",
                                    message:`创建粉丝站[${ack.club_id}]成功.`
                                });

                                this.loading = false;
                                this.status = "view";
                                this.loadView();
                                this.$local.SetAttribute("stars.active","clubs");
                                this.$router.push({
                                    path:`/stars/${this.club.star_id}`
                                })
                            }).catch(()=>{
                                this.loading = false;
                        })
                    }

                    if(this.status === "view") {
                        let c: Stars.GetClubResponse = this.club;

                        let ask:Stars.CreateClubRequest = {
                            club_id: c.club_id,
                            star_id:c.star_id,
                            name:c.name,
                            phone:c.phone,
                            idcard_back:c.idcard_back_addr,
                            idcard_front:c.idcard_front_addr,
                            idcard_name:c.idcard_name,
                            enable:c.enable,
                            uid:c.uid,
                            weibo:c.weibo,
                        };

                        Stars.SetClub(ask)
                            .then((ack) => {
                                this.$message({
                                    type:"success",
                                    message:`修改成功.`
                                });

                                this.$local.SetAttribute("stars.active","clubs");
                                this.$router.push({
                                    path:`/stars/${this.club.star_id}`
                                })
                            })
                    }
                }
            })
        }



        status:string = "new";

        loadRules() {
            this.rules = {
                name : [{required:true, message:"请填写粉丝站名称"}],
                weibo:[{required:false}],
                uid:[{
                    required:true,
                    validator: (rule, value, callback) => {

                        if(this.club.uid.length === 0){
                            callback(new Error("请选择管理员"));
                            return
                        }

                        return User.GetUserProfile({uid:this.club.uid})
                            .then((ack) => {
                                if(ack.is_club_manager) {

                                    if(ack.club_id !== this.club.club_id) {
                                        callback(new Error("用户已经是其他粉丝站管理员"));
                                        return
                                    }
                                }

                                if(this.club.name.length === 0){
                                    this.club.name = ack.name;
                                }

                                callback()
                            }).catch(()=>{
                                callback(new Error("校验异常[服务器错误]"))
                            })

                    }, trigger: 'blur'
                }],
                star_id:[{required:true,message:"请选择明星"}],
                phone:[{pattern:/\d{11,11}/, message:"请输入11位手机号"}]
            };
        }

        loadView() {

            if(this.status === "view") {
                Stars.GetClub({club_id:this.club.club_id})
                    .then((ack)=>{
                        this.club = ack;
                        this.loadRules()
                    })
            }


            if(this.status === "sync") {
                Stars.GetSyncClub({club_id:this.club.club_id})
                    .then((ack) => {
                        this.club = ack;
                        this.loadRules()
                    })
            }


        }

        load() {
            let id:any = this.$route.params['id'];

            if(id === "new") {

                let sync:string = this.$route.query['sync'];
                let star:string = this.$route.query['star'];

                if(sync) {
                    this.status = "sync";
                    this.club.club_id = sync;
                    this.loadView()
                }else{
                    this.status = "new";

                    if(star) {
                        Stars.GetStarInfo({star_id:star})
                            .then((ack) => {
                                this.club.star_id = ack.star_id;
                                this.club.star_avatar = ack.avatar;
                                this.club.star_name = ack.name;
                            });

                        this.club.enable = true;
                        this.loadRules();
                    }
                }

            }else{
                this.club.club_id = id;
                this.status = "view";
                this.loadView();
            }
        }


        @Watch('$route')
        onRouteChange() {

            this.load()
        }

        mounted() {
            this.load()
        }

        home() {
            return {
                path:`/stars/${this.club.star_id}`
            }
        }
        onGoHome() {
            this.$router.push(this.home())
        }

        onUserSelect(user:Meta.SearchResponse_Record) {
            this.club.uid = user.id;
            this.club.user_avatar = user.avatar;
            this.club.user_name = user.name;

            let editor:any = this.$refs['editor'];

            editor.validate((valid:boolean) => {

            })
        }

        onStarSelect(star:Meta.SearchResponse_Record) {
            this.club.star_id = star.id;
            this.club.star_name = star.name;
            this.club.star_avatar = star.avatar;

            let editor:any = this.$refs['editor'];

            editor.validate((valid:boolean) => {

            })
        }

    }
</script>

<style lang="scss" scoped>

    .table {
        padding: 10px;
    }

    .card {
        padding: 10px;
        border-left: 1px solid #E4E7ED;
    }

    .card-img {
        border: 1px solid #E4E7ED;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            height: 100%;
        }
    }
</style>